<template>
    <div class="prize">
        <div class="flag">{{period}}期</div>
        <ul class="numbers">
            <li class="item" v-for="item of resultArr">
                <span
                        class="number num-1"
                        :class="{
                            'num-1': item === '1',
                            'num-2': item === '2',
                            'num-3': item === '3',
                            'num-4': item === '4',
                            'num-5': item === '5',
                            'num-6': item === '6',
                            'num-7': item === '7',
                            'num-8': item === '8',
                            'num-9': item === '9',
                            'num-10': item === '10',
                        }">{{item}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "prize",
        data() {
            return {
                period: null,
                resultArr: []
            }
        },
        props: ['data'],
        watch: {
            data(val) {
                this.period = val.period
                this.resultArr = val.resultArr
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../assets/css/bases";
    .prize {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .flag {
            flex:0 0 120px;
            font-size: @lager;
        }
        .numbers {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .item {
                font-size: 1.1rem;
                text-align: center;
                display: flex;
                justify-items: flex-start;
                align-items: center;
                span {
                    width: 21px;
                    height: 21px;
                    line-height: 25px;
                    text-align: center;
                    margin-left: 3px;
                    font-size: @default;
                }
            }
        }
    }

    @media screen and (max-width:320px){
        .prize {
            .flag {
                flex: 0 0 90px;
                font-size: 1.15rem;
            }
            .numbers {
                .item {
                    span {
                        width: 17px;
                        height: 17px;
                        line-height: 18px;
                        font-size: @default;
                    }
                }
            }
        }
    }

    @media screen and (min-width:321px) and (max-width: 375px){
        .prize {
            .flag {
                flex: 0 0 120px;
                font-size: @lager;
            }
            .numbers {
                .item {
                    span {
                        width: 20px;
                        height: 20px;
                        line-height: 21px;
                        font-size: @default;
                    }
                }
            }
        }
    }
</style>